<template>
    <div id="mark">
        <div id="confirm">
            <div class="title">
                <p>授权申请</p>
            </div>
            <div class="top">
                <div class="item">
                    <label for="">产品类型</label>
                    <el-select v-model="formData.product" placeholder="请选择">
                        <el-option v-for="item in productLists" :key="item" :label="item" :value="item" />
                    </el-select>
                </div>
                <div class="item">
                    <label for="">机器码</label> <input type="text" v-model="formData.machine">

                </div>
                <div class="item">
                    <label for="">手机号</label> <input type="text" v-model="formData.userPhone">

                </div>
                <div class="item">
                    <label for="">验证码</label>
                    <div class="code">
                        <input type="text" v-model="formData.code">
                        <el-button style="width: 90px;" :disabled="isCounting" @click="sendCode">{{ buttonText
                        }}</el-button>
                    </div>
                </div>
                <div class="item">
                    <label for="">工作单位</label> <input type="text" v-model="formData.userCompany">
                </div>
                <div class="item1">
                    <label for="">身份认证</label>

                    <div class="identity">
                        <div>
                            <el-button>上传文件</el-button>
                            <el-button>查看</el-button>
                        </div>
                        <p class="alert-text">只需证明您和您公司的关系即可，工牌，名片等 ;或者下载以下模板，填写拍照后上传;不支持身份证</p>
                    </div>
                </div>
                <div class="item">
                    <label for="">认证模版</label>
                    <div class="template">
                        <a href="公司盖章版身份证明">公司盖章版身份证明</a>
                        <a href="自主申请版身份证明" style="margin-left: 20px;">自主申请版身份证明</a>
                    </div>
                </div>
            </div>
            <div class="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { reqLoginCode, reqRegisterCode } from './api';

const prop = defineProps({
    machine: {
        type: String,
        default: ""
    },
    product: {
        type: String,
        default: ""
    },
})

const emit = defineEmits(['cancel', 'confirm'])


// 表单数据
const formData = ref({
    // 机器码
    machine: prop.machine,
    // 产品类型
    product: prop.product,
    // 手机号
    userPhone: "",
    // 验证码
    code: "",
    // 工作单位
    userCompany: "",
})
// 产品类型列表
const productLists = ref([])

const count = ref(60);
const isCounting = ref(false);
const buttonText = ref('发送验证码');

// 发送验证码
const sendCode = async () => {
    const params = {
        userPhone: formData.value.userPhone
    }
    const res = await reqLoginCode(params)
    console.log(res);
    if (res.code == 1000) {
        // 开始倒计时
        isCounting.value = true;
        startCountdown();
        ElMessage({
            message: res.result,
            type: "success",
        });
    } else if (res.code == 9999 && res.message == "验证码发送失败，您尚未注册") {
        // 走注册接口
        const params2 = {
            "userPassword": "",
            "userPhone": formData.value.userPhone,
            "code": "",
            "userCompany": "",
            "userRealName": ""
        }
        const res2 = await reqRegisterCode(params2)
        if (res2.code == 1000) {
            // 开始倒计时
            isCounting.value = true;
            startCountdown();
            ElMessage({
                message: res.result,
                type: "success",
            });
        } else {
            ElMessage({
                message: res.message,
                type: "warning",
            });
        }
    } else {
        ElMessage({
            message: res.message,
            type: "warning",
        });
    }

};

const startCountdown = () => {
    buttonText.value = `${count.value}s`;

    const timer = setInterval(() => {
        count.value--;
        buttonText.value = `${count.value}s`;

        if (count.value <= 0) {
            clearInterval(timer);
            isCounting.value = false;
            buttonText.value = '发送验证码';
            count.value = 60; // 重置倒计时
        }
    }, 1000);
};

// 确定
const confirm = () => {
    if (formData.value.product == '') {
        ElMessage.warning('请选择产品类型')
        return
    }
    if (formData.value.machine == '') {
        ElMessage.warning('请输入机器码')
        return
    }
    if (formData.value.userPhone == '') {
        ElMessage.warning('请输入手机号')
        return
    }
    if (formData.value.code == '') {
        ElMessage.warning('请输入验证码')
        return
    }
    emit('confirm')


}
// 取消
const cancel = () => {
    emit('cancel')
}


</script>


<style scoped>
#mark {
    position: absolute;
    z-index: 1000;
    background: #282b349f;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

#confirm {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 10px 20px 10px 20px;
    box-sizing: border-box;
    color: black;
    border-radius: 8px;
    border: 1px solid #939e8f;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 380px;
}

#confirm>.title {
    font-size: 16px;
    padding: 0px 10px;
    border-bottom: 1px solid #000;
}

#confirm>.top {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#confirm>.top>.item {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
}

#confirm>.top>.item1 {
    display: grid;
    grid-template-columns: 80px 1fr;
}

#confirm>.top>.item .code {
    display: grid;
    gap: 15px;
    grid-template-columns: 153px 1fr;
}

#confirm>.footer {
    display: flex;
    justify-content: flex-end;
    height: 40px;
}

.selected img {
    border: 2px solid #537cfe !important;
}

#confirm .tip {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    font-size: 15px;
    color: #878b92;
    font-style: italic;
    text-shadow: 0.2px 0.5px 0px #878b92;
}

a {
    color: #3385ff;

}

#confirm .to-link {
    padding-left: 10px;
    text-decoration: none;
}

input[type=number],
input[type=text] {
    /* background: #282b34; */
    border: 1px solid #454953;
    outline: none;
    height: 28px;
    color: black;
    text-indent: 10px;
    border-radius: 2px;
}

input[type=text]:hover {
    animation-duration: 0.5s;
    border: 1px solid #3385ff;
}

.template a {
    font-size: 12.5px;
    color: #3385ff;
    text-decoration: none;
}

.alert-text {
    font-size: 12px;
    color: #c4aa17;
    margin: 10px 0 0 0;
}
</style>
